<template>

	<view @click.stop="open" class="pici-card">
		<view class="pici-card-left">
			<svg t="1732783071461" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
				p-id="1758" width="2rem" height="2rem">
				<path
					d="M1008.185895 221.122824c-57.098377-90.39743-136.996106-165.195304-230.893437-216.293851-19.299451-10.499702-43.398766-3.299906-53.79847 15.999545s-3.299906 43.398766 15.899548 53.798471c82.097666 44.598732 151.795685 109.996873 201.694266 188.994627 7.599784 11.999659 20.39942 18.499474 33.599045 18.499474 7.299792 0 14.599585-1.999943 21.199397-6.099827 18.499474-11.799665 24.099315-36.298968 12.299651-54.898439zM468.201245 336.919532c-21.899377 0-39.698871 17.799494-39.698871 39.698872v175.994996c0.299991 10.699696 4.899861 20.299423 11.999659 27.199227l79.097751 90.097439c7.799778 8.899747 18.799466 13.499616 29.799153 13.499616 9.299736 0 18.599471-3.299906 26.199255-9.899718 16.499531-14.499588 18.099485-39.498877 3.599898-55.998408l-71.397971-81.297689V376.618404c0.099997-21.899377-17.699497-39.698871-39.598874-39.698872z"
					fill="#8a8a8a" p-id="1759"></path>
				<path
					d="M507.900117 85.226687V43.127884c0-21.899377-17.799494-39.698871-39.698872-39.698871s-39.698871 17.799494-39.698871 39.698871v43.998749c-28.299196 3.099912-56.698388 8.79975-84.897587 17.399506-247.99295 74.897871-388.788948 337.590403-313.891077 585.583353 6.399818 20.999403 28.49919 32.799068 49.498593 26.499246 20.999403-6.299821 32.899065-28.49919 26.499247-49.498592C43.413321 461.016004 160.409995 242.72221 366.504136 180.523978c206.094141-62.198232 424.387936 54.698445 486.586168 260.792586 62.298229 206.094141-54.698445 424.387936-260.792587 486.586168-148.495779 44.898724-309.491202-2.399932-410.088342-120.496575-14.199596-16.699525-39.298883-18.699468-55.998408-4.499872-16.699525 14.199596-18.699468 39.298883-4.499872 55.998408C212.608511 965.301669 344.004776 1024 479.500924 1024c45.298712 0 91.09741-6.599812 135.796139-20.099429 247.99295-74.997868 388.68895-337.6904 313.79108-585.583353C870.7898 225.12271 698.494698 97.026352 507.900117 85.226687z"
					fill="#8a8a8a" p-id="1760"></path>
			</svg>
		</view>
		<view class="short-line-colum"></view>

		<view class="pici-card-middle">
			<!-- 批次名 -->
			<view class="pici-card-top">{{name}}</view>
			<view class="short-line"></view>
			<!-- 批次截止日期 -->
			<view class="pici-card-bottom">
				<view>{{time}} 截止</view>
			</view>
		</view>

		<view class="pici-card-right">
			<view class="pici-card-right-button">
				<view>进入选购</view>
				<view>--→</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: "pici-card",
		props: {
			// 检测类型 + 其他验证
			name: {
				type: String,
				default: "批次名称",
				required: false,
			},
			time: {
				type: String,
				default: "2024-00-00 00：00：00",
				required: false,
			},

		},
		data() {
			return {

			};
		},
		methods: {
			open(e) {
				console.log("open");
			},
		}
	}
</script>

<style lang="scss">
	.pici-card {
		width: 100%;
		height: 5rem;
		display: flex;
		background-color: #fff;
		border-radius: 0.2rem;
		margin-top: $uni-spacing-col-lg;
		color: $uni-text-color;
		justify-content: center;
		align-items: center;
		box-shadow: 10px 10px 5px #888888;
		overflow: hidden;
	}

	.pici-card-left {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 20% 0 0;
		// background-color: #000;
	}

	.pici-card-right {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 25% 0 0;
		color: #fff;
		background-color: $uni-color-primary;
		height: 100%;
		// background-color: #000;
	}

	.pici-card-right-button {
		background-color: $uni-color-primary;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 0.2rem;
		font-size: $uni-font-size-lg;
		border-radius: 0.2rem;
	}

	.pici-card-middle {
		width: 60%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		flex-direction: column;
	}

	.pici-card-top {
		width: 80%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		// background-color: #888888;
		// align-content: flex-end;
		font-size: $uni-font-size-lg;
		flex: 0 0 50%;

	}

	.short-line-colum {
		border-right: 1px solid $uni-color-primary;
		/* 1像素的黑色横线 */
		height: 50%;
		width: 0;
		/* 确保线条不占据空间 */
	}

	.short-line {
		border-top: 1px solid $uni-color-primary;
		/* 1像素的黑色横线 */
		width: 100%;
		height: 0;
		/* 确保线条不占据空间 */
		// margin-top: 0.1rem;
	}

	.pici-card-bottom {
		width: 80%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		// justify-content: center;
		//  align-items: center;
		font-size: $uni-font-size-sm;
		padding-top: 0.2rem;
	}
</style>